.notification-center {
  height: 100%;

  > .notification {
    height: 100%;
    padding: var(--#{$cdk}size-8);
    color: var(--#{$cdk}header-text-color);
    background: transparent;
    border: none;

    &:hover {
      color: var(--#{$cdk}header-text-color-hover);
    }

    > .material-icons {
      font-size: var(--#{$cdk}size-24);
    }

    > .count {
      @include notification_counter();
      top: var(--#{$cdk}size-2);
      right: var(--#{$cdk}size-2);
      min-width: var(--#{$cdk}size-18);
      height: var(--#{$cdk}size-18);

      > span {
        font-size: inherit;
        color: inherit;
      }

      @include media-breakpoint-down("sm") {
        top: 0.7rem;
        right: 0.2rem;
      }

      &.hide {
        display: none;
      }
    }
  }

  > .notification::after {
    display: none;
  }

  .dropdown-menu {
    min-width: 25rem;
    padding: 0;
    margin: 0;
    @include border-radius(0);
  }

  .notifications {
    .nav-pills {
      display: flex;
      border-bottom: var(--#{$cdk}size-1) solid var(--#{$cdk}primary-400);

      .nav-item {
        //width: 33.33333%;
        flex-grow: 1;
        text-align: center;

        .nav-link {
          margin: 0;
          white-space: nowrap;
        }
      }
    }

    .tab-content {
      padding: var(--#{$cdk}size-16);

      .tab-pane {
        height: var(--#{$cdk}size-160);
        overflow-y: auto;

        .no-notification {
          display: none;
        }

        &.empty {
          color: var(--#{$cdk}primary-800);
          text-align: center;

          &::before {
            font-family: var(--#{$cdk}font-family-material-icons);
            font-size: var(--#{$cdk}size-56);
            color: var(--#{$cdk}primary-400);
            content: "\E7F5";
          }

          > .no-notification {
            display: block;
          }
        }
      }

      .notif {
        display: inline-block;
        width: 100%;
        padding: var(--#{$cdk}size-8);
        vertical-align: middle;

        * {
          display: inline-block;
          line-height: var(--#{$cdk}size-18);
          vertical-align: text-top;
        }

        .material-icons {
          padding: 0;
          font-size: var(--#{$cdk}size-16);
          line-height: var(--#{$cdk}size-18);
          color: inherit;
        }

        &__carrier {
          color: var(--#{$cdk}primary-600);
        }

        &__status {
          &.open {
            color: var(--#{$cdk}green-500);
          }

          &.closed {
            color: var(--#{$cdk}red-500);
          }

          &.pending1,
          &.pending2 {
            color: var(--#{$cdk}yellow-500);
          }
        }

        &:hover {
          text-decoration: none;
          background-color: var(--#{$cdk}blue-50);
        }
      }
    }
  }

  .mobile & {
    .nav-link::before {
      display: none;
      font-family: var(--#{$cdk}font-family-material-icons);
      font-size: 30px;
      color: $gray-dark;
    }

    #orders-tab::before {
      content: "\E8CB";
    }

    #customers-tab::before {
      content: "\E7FE";
    }

    #messages-tab::before {
      content: "\E0BE";
    }

    &.show {
      .dropdown-toggle {
        color: $primary;
      }
    }
  }
}
